$drag-tag-form-color: #333;
$drag-tag-form-border-color: rgb(238, 238, 238);
$drag-tag-form-th-bg:rgb(232, 232, 232);
$drag-tag-form-th-color:#333;
$drag-tag-form-tr-bg:#fff;
$drag-tag-form-tr-color:#333;
$drag-tag-form-tr-border-color:rgb(219, 219, 219);

$drag-tag-form-transition-duration: 300ms;
$drag-tag-form-transition-timing-function: linear;
.drag-tag-form-box{
    width: 100%;
    // @include flexLayout(flex, normal, normal);
    padding: .1rem 0;
    .drag-tag-form__title{
        flex: 0 0 auto;
        width: 120px;
        padding: .14rem 0 .14rem;
        white-space: nowrap;
        color: $drag-tag-form-color;
        font-size: .14rem;
        text-align: left;
    }
    .drag-tag-form__table{
        flex: 1;
        width: 100%;
    }
    .drag-tag-form__tbody{
        width: 100%;
        &>span{
            display: block;
            min-height: .48rem;
        }
        ::v-deep{
            .sortable-chosen{
                width: 100%;
                height: .48rem;
                list-style-type: none;
                &>.el-button{
                    width: 100%;
                    height: 100%;
                    background-color: transparent;
                }
            }
        }
    }
    .drag-tag-form__tr,
    .drag-tag-form__th{
        width: 100%;
        @include flexLayout(flex, normal, center);
        background-color: $drag-tag-form-th-bg;
        .drag-tag-form__td{
            flex: 0 1 100%;
            text-align: center;
            color: $drag-tag-form-th-color;
            font-size: .14rem;
            height: .48rem;
            padding: 0 .12rem;
            @include flexLayout(flex, center, center);
            &.optionValueText{
                flex: 0 0 auto;
                width: 2.2rem;
            }
            .drag-tag-form__sub-text{
                width: 80%;
                @include textEllipsis();
            }
        }
    }
    .drag-tag-form__tr{
        background-color: $drag-tag-form-tr-bg;
        .drag-tag-form__td{
            border: 1px solid $drag-tag-form-tr-border-color;
            color: $drag-tag-form-tr-color;
            &+.drag-tag-form__td{
                border-left: none;
            }
        }
        &+.drag-tag-form__tr .drag-tag-form__td{
            border-top: none;
        }
    }
    .drag-tag-form__tr-empty{
        padding: .2rem 0;
    }
    .drag-tag-form__group{
        padding: .1rem 0;
    }
    .ghost {
        opacity: 0.5;
        background: #c8ebfb;
    }
}